<template>
  <el-pagination
  class="center15"
    :current-page="page"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    background
    :layout="layout"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script>
export default {
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    page: {
      type: Number,
      default: 1
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 40]
      }
    },
    layout: {
      type: String,
      default: 'total,sizes, prev, pager, next'
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.$emit('update:pageSize', val)
      this.pageChange()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.$emit('update:page', val)
      this.pageChange()
    },
    pageChange(){
      this.$emit("pageChange")
    }
  }
}
</script>
<style lang="scss" scoped>
  .center15{
    margin: 15px auto 0  ;
    text-align: center;
  }
</style>